//定义Vue 登录组件
//必须有Elementui ，axios的支持
Vue.component("login", {
    props:["base-url"],
    data() {
        return {
            loginWinVisiable: false,
            pwdWinVisiable: false,
            forgetWinVisiable: false,
            user: {},
            pwd: {},
            forget:{},
        };
    },
    template: `
        <div>
            <el-dialog title="登陆窗口" :visible.sync="loginWinVisiable">
                <el-form>
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="user.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                      <el-input v-model="user.password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="loginWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="login">确 定</el-button>
                </div>
            </el-dialog>
            
            <el-dialog title="修改密码" :visible.sync="pwdWinVisiable">
                <el-form>
                    <el-form-item label="原密码" label-width="100px">
                        <el-input v-model="pwd.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" label-width="100px">
                      <el-input v-model="pwd.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="pwdWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="modifyPwd">确 定</el-button>
                </div>
            </el-dialog>
            
             <el-dialog title="忘记密码" :visible.sync="forgetWinVisiable">
                <el-form>
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="forget.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" label-width="100px">
                      <el-input v-model="forget.vcode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" label-width="100px">
                      <el-input v-model="forget.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="forgetWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="sendEmail">发送验证码</el-button>
                    <el-button type="primary" @click="modifyPwd1">修改密码</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    methods: {
        login() {
            let p = new URLSearchParams();
            p.append("username", this.user.username);
            p.append("password", this.user.password);
            axios.post(this.baseUrl + "/login", p).then(res => {
                if (res.data.code == 1) {
                    this.$message.success(res.data.msg);
                    this.user = res.data.data;
                    //发布vue组件事件
                    this.$emit("logined", this.user);
                    this.loginWinVisiable = false;
                    if (res.data.data.backURI){
                        location.href = res.data.data.backURI;
                    }
                } else {
                    this.$alert(res.data.msg)
                }
            })
        },
        logout() {
            axios.post(this.baseUrl + "/logout").then(res => {
                this.$message.success(res.data.msg);
                this.user = {};
                //发布vue组件事件
                this.$emit("logined", null);
            })
        },
        openPwdWin() {
          this.pwdWinVisiable = true;
        },
        openLoginWin() {
            this.loginWinVisiable = true;
        },
        openForgetWin() {
          this.forgetWinVisiable = true;
        },
        modifyPwd() {
            let p = new URLSearchParams();
            p.append("newPassword",this.pwd.newPassword || "");
            p.append("password",this.pwd.password || "");
            axios.post(this.baseUrl + "/modifyPwd",p).then(res => {
                if (res.data.code == 1){
                    this.$message.success(res.data.msg);
                    this.pwdWinVisiable = false;
                }else {
                    this.$alert(res.data.msg);
                }
            })
        },
        sendEmail(){
            axios.post(this.baseUrl + "/forgetPwd?username=" + this.forget.username).then(res=>{
                if (res.data.code == 1){
                    this.$message.success(res.data.msg);
                }else {
                    this.$alert(res.data.msg);
                }
            })
        },
        modifyPwd1(){
            let p = new URLSearchParams();
            p.append("newPassword",this.forget.newPassword);
            p.append("vcode",this.forget.vcode);
            axios.post(this.baseUrl + "/modifyPwd1",p).then(res=>{
                if (res.data.code == 1){
                    this.$message.success(res.data.msg);
                    this.forgetWinVisiable = false;
                }else {
                    this.$alert(res.data.msg);
                }
            })
        }
    },
    created() {
        //默认的地址前缀""
        this.baseUrl  = this.baseUrl || "";
            axios.get(this.baseUrl + "myinfo").then(res => {
            if (res.data.code) {
                this.user = res.data.data;
                this.$emit("logined", this.user);
            }else if (location.search == '?tologin'){
                this.openLoginWin();
            }
        })
    }
})